<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>15.对象的浅拷贝多种操作方法</title>
</head>

<body>
  <script>
    let hd = { name: "后盾人" };
    let cms = hd;
    cms.name = "houdunren.com";
    // 直接赋值，cms指向的是hd的内存地址，修改cms对象的值等于修改hd的值
    console.log(hd); //{name: 'houdunren.com'}
    // 浅拷贝不能进行深层次的复制，如果对象的某个属性是对象的话不能将这个属性复制过来
    
    // 浅拷贝方法1:
    // 取出hd的值，生成新对象，
    cms = {
      name: hd.name
    };
    console.log(cms); //{name: 'houdunren.com'}
    cms.name = "sina.com";
    //此时cms和hd看起来值一样却是不同的内存数据,修改cms的值不会改变hd
    console.log(cms);//{name: 'sina.com'} 
    console.log(hd); //{name: 'houdunren.com'}

    // 浅拷贝方法2
    // 循环操作，当复制的属性很多的时候可以这样操作，适合复制对象的时候需要做一些改变的情况
    hd = { name: "后盾人", url: "houdunren.com" };
    let obj = {};
    for (let key in hd) {
      obj[key] = hd[key]+"湘军";
    }
    // 浅拷贝了hd的值和属性，生成新的对象
    console.log(obj); //{name: '后盾人湘军', url: 'houdunren.com湘军'}
    obj.name = "yaho";
    // 改变obj不会改变hd，obj是一个新的对象不会影响原本的hd
    console.log(obj); //{name: 'yaho', url: 'houdunren.com湘军'}
    console.log(hd); //{name: '后盾人', url: 'houdunren.com'}

    //浅拷贝方法3: 
    //使用Object.assign,适合多个对象合并
    obj = Object.assign({}, hd); // 相当于把hd压入新对象当中
    console.log(obj); //{name: '后盾人', url: 'houdunren.com'}  
    // 改变obj不会改变hd，obj是一个新的对象不会影响原本的hd
    obj.name = "tom";
    console.log(obj);//{name: 'tom', url: 'houdunren.com'}
    console.log(hd);//{name: '后盾人', url: 'houdunren.com'}

    //浅拷贝方法4:
    // 使用展开语法 ...，适合单个对象复制
    obj = { ...hd };
    console.log(obj); //{name: '后盾人', url: 'houdunren.com'}
    // 改变obj不会改变hd，obj是一个新的对象不会影响原本的hd
    obj.name = "chrome";
    console.log(obj);//{name: 'chrome', url: 'houdunren.com'}
    console.log(hd);//{name: '后盾人', url: 'houdunren.com'}
  </script>
</body>

</html>